<!--
 * @author wangpeizhi
 -->
<template>
  <div id="powerTree" v-loading="menuLoading">
    <el-tree
      ref="tree"
      class="power-tree"
      :data="treeData"
      :props="defaultProps"
      :default-expanded-keys="['-1']"
      :default-checked-keys="checkedData"
      show-checkbox
      highlight-current
      node-key="id"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span
          :class="['tag', data.type === 'CDLX01' ? 'gh' :(data.type === 'CDLX02' ? 'qy' : '')]"
        >{{ (data.type === 'CDLX01') ? '菜单' : (data.type === 'CDLX02' ? '按钮' : '') }}</span>
      </span>
    </el-tree>
  </div>
</template>
<script>
import { queryMenu, saveMenu, getData } from '@/views/platformrole/api/powerallot'
export default {
  name: 'Powertree',
  props: {
    roleId: {
      type: String,
      default: () => ''
    },
    sysId: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      menuLoading: false,
      treeData: [],
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      checkedData: [] // 选中的节点
    }
  },
  watch: {
    roleId: {
      handler(newValue, oldValue) {
        // alert();
        this.getMenu(this.sysId)
        this.roleId = newValue
        this.getData()
      },
      deep: true
    }
  },
  methods: {
    test(val) {
      // alert(val);
      this.getMenu(val)
      this.getData()
    },
    /*
      params:点角色对应的code对应权限
      return:无
      params:设置树的选中与否
    */
    setTree(code) {
      if (code) {
        const arr = code.split(',')
        this.checkedData = arr
      } else {
        this.checkedData = []
        this.$refs.tree.setCheckedKeys([])
      }
    },

    /*
      params: 无
      return:无
      function:获取权限树结构
    */
    getMenu(val) {
      this.menuLoading = true
      return new Promise((resolve, reject) => {
        // alert(val);
        queryMenu({ belongSystem: val }).then(response => {
          this.menuLoading = false
          this.treeData = response.data.data
        }).catch(error => {
          reject(error)
          this.menuLoading = false
        })
      })
    },

    /**
     * 保存提交数据
     */
    saveData() {
      const checkArr = this.$refs.tree.getCheckedKeys()
      const halfArr = this.$refs.tree.getHalfCheckedKeys()
      const arr = [...checkArr, ...halfArr]
      const menuIds = arr.join(',')
      this.menuLoading = true
      return new Promise((resolve, reject) => {
        saveMenu({ roleId: this.roleId, menuIds: menuIds }).then(() => {
          this.menuLoading = false
          this.$message({
            message: '保存成功！',
            type: 'success'
          })
          this.$emit('dialogPower', false)
        }).catch(error => {
          reject(error)
          this.menuLoading = false
        })
      })
    },
    /**
     * 获取角色已有权限
     */
    getData() {
      this.menuLoading = true
      return new Promise((resolve, reject) => {
        getData({ id: this.roleId }).then(response => {
          this.menuLoading = false
          const str = response.data.data[0].data || ''
          this.setTree(str)
        }).catch(error => {
          this.menuLoading = false
          reject(error)
        })
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
#powerTree {
  height: 400px;
  overflow: auto;
 /* .power-tree {
    height: 100%;
    overflow: auto;
  }*/
  .el-tree-node__content {
    margin-top: 5px;
  }
  .tag {
    font-size: 12px;
    border-radius: 4px;
    padding: 2px 4px;
    color: #fff;
    &.gh {
      color: #ff7474;
      border: 1px solid #ff7474;
    }
    &.qy {
      color: #2fbcfb;
      border: 1px solid #2fbcfb;
    }
    &.bm {
      color: #ffa11c;
      border: 1px solid #ffa11c;
    }
  }
  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-icon-caret-right:before {
    content: "\E7A0";
    font-size: 14px;
  }
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: "\E7A2";
    font-size: 14px;
  }
}
</style>

